<template>
  <div>
    <el-dialog title="新增工单" :visible="create" width="30%" @close="close">
      <el-form :model="form" :rules="rules" ref="form">
        <!-- 设备编号 -->
        <el-form-item label="设备编号" prop="innerCode">
          <el-input
            placeholder="请输入"
            show-word-limit
            maxlength="15"
            style="width: 80%"
            v-model="form.innerCode"
            @change="changNumber"
          ></el-input>
        </el-form-item>
        <!-- 工单类型 -->
        <el-form-item label="工单类型" prop="productTypeId">
          <el-select placeholder="请选择" v-model="form.productTypeId">
            <el-option label="补货工单" value="补货工单"></el-option>
          </el-select>
        </el-form-item>
        <!-- 补货数量 -->
        <el-form-item label="补货数量">
          <span>
            <i class="el-icon-document" /><el-button
              medium
              type="text"
              @click="detailList"
              >补货清单</el-button
            ></span
          >
        </el-form-item>
        <!-- 补货详情 -->
        <el-dialog title="补货详情" :visible.sync="innerVisible" append-to-body>
          <el-table :data="tableData" style="width: 100%" max-height="400">
            <el-table-column prop="channelCode" label="货道编号">
            </el-table-column>

            <el-table-column prop="sku.skuName" label="商品名称">
              <template slot-scope="{ row }">
                <span v-if="row.sku.brandName">{{ row.sku.brandName }}</span>
                <span v-else>-</span>
              </template>
            </el-table-column>

            <el-table-column label="当前数量">
              <template slot-scope="{ row }">
                <span v-if="row.sku.brandName">{{ row.currentCapacity }}</span>
                <span v-else>-</span>
              </template>
            </el-table-column>

            <el-table-column label="还可以添加"
              ><template slot-scope="{ row }">
                <span v-if="row.sku.brandName">{{ row.maxCapacity }}</span>
                <span v-else>-</span>
              </template>
            </el-table-column>

            <el-table-column label="补满数量" width="230">
              <template slot-scope="{ row }">
                <el-input-number
                  v-if="row.sku.brandName"
                  v-model="num"
                  size="medium"
                  controls-position="right"
                  :min="0"
                  :max="10"
                  @change="handleChange"
                />
                <span v-else>{{ row.sku.expectCapacity }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-row slot="footer" type="flex" justify="conter" class="footer">
            <el-button @click="innerVisible = false" class="qx">取消</el-button>
            <el-button @click="innerVisible = false" class="qd">确认</el-button>
          </el-row>
        </el-dialog>
        <!-- 运营人员 -->
        <el-form-item label="运营人员" prop="assignorId">
          <el-select placeholder="请选择" v-model="form.assignorId">
            <el-option
              v-for="item in userList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 备注 -->
        <el-form-item label="备注" prop="desc">
          <el-input
            type="textarea"
            maxlength="40"
            show-word-limit
            v-model="form.desc"
            :rows="3"
            placeholder="请输入备注(不超过40字)"
            style="width: 90%"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close" class="qx">取 消</el-button>
        <el-button type="primary" @click="addList" class="qd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getUserList, getMachineDetail, setWorkList } from '@/api/work'

export default {
  name: 'create-page',
  props: {
    create: { type: Boolean },
    getList: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      num: 0,
      form1: {
        productType: ''
      },

      form: {
        assignorId: null,
        createType: 1,
        desc: '',
        details: [],
        innerCode: '',
        productTypeId: '',
        userId: 1
      },
      rules: {
        innerCode: [{ required: true, message: '请输入', trigger: 'blur' }],
        productTypeId: [{ required: true, message: '请输入', trigger: 'blur' }],
        assignorId: [{ required: true, message: '请输入', trigger: 'blur' }],
        desc: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      userList: [],
      innerVisible: false,
      tableData: []
    }
  },
  methods: {
    close() {
      this.$emit('update:create', false)
    },
    async detailList() {
      const res = await getMachineDetail(this.form.innerCode)
      this.innerVisible = true
      const newArr = res.map((item) => {
        if (item.sku) {
          return item
        } else {
          item.sku = { expectCapacity: '货道暂无商品' }
          return item
        }
      })
      this.tableData = newArr
      // console.log(this.tableData)
    },
    async changNumber() {
      this.userList = []
      this.userList = await getUserList(this.form.innerCode)
      // console.log(this.userList)
    },
    handleChange(value) {
      console.log(value)
    },

    async addList() {
      this.tableData = this.tableData.filter((item) => {
        if (item.skuId !== '0') {
          return true
        } else {
          return false
        }
      })

      this.tableData.forEach((item) => {
        item.expectCapacity = this.num
      })
      const newArr = []
      this.tableData.forEach((item, index) => {
        const obj = item
        newArr.push({
          channelCode: obj.channelCode,
          expectCapacity: obj.expectCapacity,
          skuId: obj.skuId,
          skuImage: obj.sku.skuImage,
          skuName: obj.sku.skuName
        })
      })
      // console.log(newArr)
      this.form.details = newArr
      this.form.productTypeId = 2
      try {
        await setWorkList(this.form)
        this.$refs.form.resetFields()
        this.$message({
          message: '恭喜你，新建成功',
          type: 'success'
        })
        this.getList()
        this.$emit('update:create', false)
      } catch (error) {
        this.form.productTypeId = '补货工单'
        this.$message.error(`${error.response.data}`)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.dialog-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
  .qx {
    background-color: #fbf4f0;
    border: none;
  }
  .qd {
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    border: none;
  }
}
.footer {
  display: block;
  text-align: center !important;
  .qx {
    background-color: #fbf4f0;
    border: none;
  }
  .qd {
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    border: none;
  }
}
</style>
